<template>
	<div class="container">
		<div class="center">
			<div class="news-news" v-for="(item, index) in $store.state.newnews" :key="index">
				<ul class="probootstrap-news">
					<li>
						<h3>
							<a @click="tonewsdetail(index)" class="dianjitexiao">{{ item.news_name }}</a>
						</h3>
						<span class="probootstrap-date">{{ item.news_create_time }}</span>
						<p>{{ item.news_detail }}</p>
						<p>
							<span>
								<a href=""><i></i></a>
								<a href=""><i></i></a>
							</span>
						</p>
					</li>
				</ul>
				<div class="news-img"><img :src="item.news_cover" /></div>
			</div>
		</div>
	</div>
</template>

<script>
import { request } from '../api/axios.js';
export default {
	name: 'collectionorganization',
	data() {
		return {
			index: '',
			newnews: {
				// imgurl:'http://8.136.157.194:8000/media/',
				id: 1,
				news_collect_num: 0,
				news_cover: '',
				news_create_time: '',
				news_detail: '',
				news_initiator_id: 21,
				news_initiator_phone: '',
				news_name: '',
				news_status: '',
				news_tag: ''
			}
		};
	},
	methods: {
		getnewnews() {
			// request({
			// 	url: '/v1/news/indexrecommend'
			// }).then(res => {
			// 	console.log(res);
			// 	this.$store.state.newnews = res.data.data;
			// 	res.data.data.map(item => {
			// 		item.news_cover = 'http://8.136.157.194:8000/media/' + item.news_cover;
			// 	});
			// 	console.log(this.$store.state.newnews);
			// });
			// request({
			// 	url: '/v1/activities/activitypage',
			// 	method: 'post',
			// 	data: {
			// 		page: 1
			// 	}
			// }).then(res => {
			// 	console.log(res);
			// 	this.pagesize = res.data.pageNum;
			// 	this.$store.state.newactivity = res.data.data;
			// 	res.data.data.map(item => {
			// 		item.activity_cover = 'http://8.136.157.194:8000/media/' + item.activity_cover;
			// 	});
			// });
			request({
				url: '/v1/news/selfcollectnews',
				method: 'post',
				data: {
					userName: this.$store.state.userInfo.userName
				}
			}).then(res => {
					console.log(res);
				
					this.$store.state.newnews = res.data.data;
					res.data.data.map(item => {
						item.news_cover = this.$store.state.publicStaticPath + item.news_cover;
					});
			});
		},
		getcollect() {},
		tonewsdetail(index) {
			let nowid = this.$store.state.newnews[index].id;
			this.$store.dispatch('tonewsdetail', index);
			this.$router.push({
				path: '/newsdetail',
				query: { index: nowid }
			});
		}
	},
	created() {
		this.getnewnews();
	}
};
</script>

<style scoped>
.container {
	width: 100%;
}
.container .top {
}
.center {
	justify-content: center;
	width: 100%;
	
	display: flex;
	flex-wrap: wrap;
}
.news-news {
	text-align: left;
	height: 30rem;
	width: 35rem;
	margin-right: 2rem;
	display: flex;
	margin: -6rem 0 0rem 4rem; /* 第一个是上 ,第二个是右，第三个是下，第四个是左*/
}
.news-img img {
	width: 16rem;
	height: 16rem;
}
.probootstrap-news {
	width: 20rem;
	margin-right: 2rem;
	display: flex;
}
.probootstrap-news li {
	list-style: none;
	display: block;
}
.probootstrap-news li p {
	list-style: none;
	color: #637381;
	line-height: 26px;
	font-size: 16px;
	font-weight: 300;
	font-family: Lato, Arial, sans-serif;
}
.probootstrap-news li a {
	color: #fdbe34;
	text-decoration: none;
	transition: 0.3s all;
}
.probootstrap-news li a:hover {
	color: #333;
	text-decoration: none;
}
.probootstrap-news li .probootstrap-date {
	color: #ccc;
	text-transform: uppercase;
}
.newsfooter {
	margin-bottom: -15rem;
}
.probootstrap-news li .news-routerlink {
	color: white;
}
.dianjitexiao {
	cursor: pointer;
}
</style>
